<template>
  <div style="width: 100%; height: 100%;">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="areaName" label="区域名称" width="180"></el-table-column>
      <el-table-column prop="warningInfo" label="预警信息" min-width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.warningInfo }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="areaImage" label="区域图片" width="180">
        <template slot-scope="scope">
          <img :src="scope.row.areaImage" alt="区域图片" style="max-width: 100px; max-height: 60px;">
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="showDetails(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详细信息对话框 -->
    <el-dialog title="区域详细信息" :visible.sync="dialogVisible" width="40%">
      <el-row>
        <el-col :span="12">
          <strong>区域名称:</strong> {{ currentRow.areaName }}
        </el-col>
        <el-col :span="12">
          <strong>ID:</strong> {{ currentRow.id }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <strong>预警信息:</strong> {{ currentRow.warningInfo }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <strong>区域图片:</strong>
          <img :src="currentRow.areaImage" alt="区域图片" style="max-width: 100%; max-height: 200px;">
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      tableData: [
        { id: 1, areaName: '一矿', warningInfo: '4401-4402段地表塌陷，容易在山体边坡产生裂缝导致机构...', areaImage: require('@/assets/img/37x00351.jpg') },
        { id: 2, areaName: '二矿', warningInfo: '4901-4902段阳光沟煤层，半个山体塌陷...', areaImage: require('@/assets/img/37x00352.jpg') },
        // 其他数据项...
      ],
      dialogVisible: false,
      currentRow: {}
    };
  },
  methods: {
    showDetails(row) {
      this.currentRow = row;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
.el-table .cell {
  white-space: normal;
}

.el-row {
  margin-bottom: 10px;
}
</style>